/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var data2=[];
var dataDate=[];
var choix1;
var dateD;
var dateM;
var dateY;
var location1;
var yAxis;
var barPadding = 1;
var tampon=0;
var hTitle=30;
var margin = {
    top: 40, 
    right: 10, 
    bottom: 10, 
    left: 30
},
w = 1200 - margin.left - margin.right,
h = 500 - margin.top - margin.bottom;
var p=10;
var svgTiltle=d3.select("body")
.append("svg")
.attr("width", w+ margin.left + margin.right)
.attr("height", hTitle+margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
;
                 
var svg = d3.select("body")
.append("svg")
.attr("width", w+ margin.left + margin.right)
.attr("height", h+ margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
           
            
           
var tooltip = d3.select("body")
.append("div")
//.style("position", "absolute")
.style("position", "absolute")
.style("height", "150px")
.style("width", "150px")
.style("background-color", "aliceblue")
.style("z-index", "100")
.style("visibility", "hidden")
.style("font","sans-serif");

function callDraw(choix,dateOfDay,dateOfMonth,dateOfYears,location)
{
    
    dateD=dateOfDay;
    dateM=dateOfMonth;
    dateY=dateOfYears;
    choix1=choix;
    location1=location;
    var req2 = new XMLHttpRequest();
    var fileListReqUrl = "http://localhost:8080/WebServiceTemperatureFinal/app/Json/Visualization2D?view="+choix+"&date="+dateOfDay+""+dateOfMonth+""+dateOfYears+"&location="+location;

    req2.open("GET",fileListReqUrl,true); 
    req2.onreadystatechange = function(){
        if (req2.readyState == 4) 
        { 
            var echantillon = eval('(' + req2.responseText + ')'); 
            test(echantillon);
            
            affichage(data2);
            
        }
    };   // la fonction de prise en charge

    req2.send(null);
}
function test(echantillon)
{
    var dataD=[]; 
    var data1=[];
    var size= echantillon.length;
    for (i = 0; i < size; i++) 
    { 
        var temperature = echantillon[i].dataValue;
        var dateCapture= new Date(echantillon[i].dateCapture);
        dataD.push(dateCapture);
        data1.push(temperature);
    }
    var i=0;
    
    dataDate=dataD;
    data2= data1;
}
          
function animate(number)
{
     
    if(number<10)
    {
        number="0"+number;
    }
          
    if(choix1=="years")
    {
            
        callDraw("month",dateD,number,dateY,location1);
        return;
    }
    if(choix1=="month")
    {
        callDraw("day",number,dateM,dateY,location1);
        return;
    }
      
}

function affichage()
{ 
   
     svg.selectAll("rect").remove();
    // var y=d3.scale.linear().domain(d3.extent(data2)).range([0,width]);
    
    var y0 = Math.max(-d3.min(data2), d3.max(data2));

    var y = d3.scale.linear()
    .domain([-y0, y0])
    .range([h, 0])
    .nice();

    var x = d3.scale.ordinal()
    .domain(d3.range(data2.length))
    .rangeRoundBands([0, w], .2);
    
    drawScales(x,y);
    
    
    svg.selectAll("rect")
    .data(data2)
    .enter()
    .append("svg:rect")
    .attr("y",function(d, i) {
        return y(Math.max(0, d)); 
    })
    .attr("x", function(d,i) {
        return x(i);  //Height minus data value
    })
    .attr("width", x.rangeBand())
    .attr("height", function(d) {
        return Math.abs(y(d) - y(0));
    }).attr("fill", function(d){
        if(d<0){
            return "steelblue";
        }
        return "brown";
    })
    .on("mouseover", function(d,i){
        d3.select(this).style("fill", "grey");
        var text1=choixView();
        var nombre=i+1;
        tooltip.text("Date de capture : "+dataDate[i].toString()+"   "+"Temperature : "+d+" C");
        tooltip.style("visibility", "visible");
        tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
    })
    .on("mouseout", function(){
        d3.select(this).style("fill", function(d){
            if(d<0){
                return "steelblue";
            }
            return "brown";
        });
        tooltip.style("visibility", "hidden");
    })
    .on("mousedown", function(d,i){
        var number =i+1;
        animate(number);
    });
    
      
    drawTitle();
    
             
}

function choixView()
{
    if(choix1=="years")
    {
        return "month";
    }
    if(choix1=="month")
    {
        return "day";
    }
    if(choix1=="day")
    {
        return "hours"
    }
}
function drawScales(x,y)
{
    var vis = svg.append("svg:g")
    .attr("transform", "translate(" + p + "," + p + ")");
     svg.selectAll("line.yLine")
            .attr("y1", 0)
            .attr("y2", 0)
            .remove();
            svg.selectAll("text.yText")
            .attr("y", 0)
            .remove();
   
        var vis = svg.append("svg:g");
    
        var yrule = vis.selectAll("g.y")
        .data(y.ticks(10))
        .enter().append("svg:g")
        .attr("class", "y");
        
        yrule.append("svg:line")
        .attr("class", "yLine")
        .style("stroke", "#ccc")
        .style("shape-rendering", "crispEdges")
        .attr("x1", 0)
        .attr("x2", w)
        .attr("y1", y)
        .attr("y2", y);

        yrule.append("svg:text")
        .attr("class", "yText")
        .attr("x", 0)
        .attr("y", y)
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .text(y.tickFormat(10));
}
function drawTitle()
{
    svgTiltle.selectAll("text").remove();
    if(choix1=="years")
    {
                 
        svgTiltle.append("text").text(function(){
            return "Annually average temperature at "+location1+" "+dateY
        }).attr("x",325).attr("y",10);
    }
    if(choix1=="month")
    {
                 
        svgTiltle.append("text").text(function(){
            return "Monthly average temperature at "+location1+" "+dateM+"/"+dateY
        }).attr("x",325).attr("y",10);
    }
    if(choix1=="day")
    {
                 
        svgTiltle.append("text").text(function(){
            return "Temperature of day at "+location1+" "+dateD+"/"+dateM+"/"+dateY
        }).attr("x",325).attr("y",10);
    }
                 
}

